1 03-27-24 (Wednesday)
Lord, you reveal your glory in every thing you made
Let us today engage with this creation so that we may participate in your beauty and wisdom
May the technology we use or even develop point us toward that,
Instead of dragging us towards our own vicious desires and illusions of freedom
Help us, and our society, to know your ways and be still, for yours is the glory
And our hearts are restless till they find rest in You.
Amen.
2 Quiz 05
3 Interaction design (IxD)
- “The practice of designing interactive digital products, environments, systems, and services to support user interactions and behaviors”.
- Some objectives:
- Greater productivity and avoiding errors (traditional theories in human-computer interaction (HCI), human factors and ergonomics)
- Better collaboration (sociotechnical system design, computer supported cooperative work (CSCW))
- Better “feel” and aesthetic appeal (user experience (UX))
- Better accessibility
- Great use of design and aesthetic principles to help users interact well. For example, designers usually pay attention to elements of visual aesthetics:
- size of components;
- colors;
- spacing and alignment;
- typography;
- layout
- Lots of details, courses and reference can be found at the Interaction Design Foundation](https://www.interaction-design.org/)
3.1 The IxD typical process
- Ideation and user research: understand the idea, its target users (for example: creating personas), etc.
- Sketching: drawing rough, low-fidelity sketches by hand to visualize layout, content placement, and basic interactions. Usually pen and paper!
- Wireframing: more detailed and structured approach - typically created using digital tools and represent a higher fidelity than sketches. They outline the placement of elements such as navigation, content areas, and interactive components without focusing on visual design details like colors and fonts
- One of the most useful tools today is Figma
- Prototyping: creating a functional, interactive representation of a design concept, be it low-fidelity (simple click-through prototypes) to high-fidelity (closely resembling the final product in terms of design and functionality)
- Usability tests: involve participants interacting with a prototype while we collect data in order to identify any usability problems, understand the experience better and explore alternatives.
- Some types of tests:
- Surveys, questionnaires and interviews
- Comparisons, A/B Tests
- Think-Aloud Protocol
- Task-Based Testing
- Cognitive Walkthrough
- Tracking (eye, mouse, emotions, etc)
- Heuristic Evaluation
- Information Sorting (cards, trees)
- First-Click Test
- Benchmarking
- Ethnography and field study
- See, for example, some demonstrations here.
- Some types of tests:
- UI and UX Patterns: it is also good to have a repertoire of well-known solutions to interaction problems - these are called UI patterns.
4 Technological Mediation
- What are some implications of interaction design?
4.1 Technological liturgies and formation
- James K. A. Smith argues that every practice around a cultural artifact configures a liturgy that influences the way we see the world.
Technology affords and invites rituals of interaction. How you handle your phone might seem to be a rather banal concern. Are the practices of how we interface with a small metal device really worthy of analysis? […] As is so often the case, [a] zeitgeist is succinctly pictured in a rather inane Michelob Ultra commercial in which the world obeys the touch commands of an iPhone screen. […] we perhaps nonetheless unconsciously begin to expect the world to conform to our wishes as our iPhone does. Or I implicitly begin to expect that I am the center of my own environments, and that what surrounds me exists for me. In short, my relation to my iPhone—which seems insignificant—is writ large as an iPhone-ized relation to the world, an iPhone-ization of my world(view). “Imagining the Kingdom”, James K. A. Smith
- One very bad way that technology may be forming us is by psychological manipulation of our attention and some practices that people have been calling “dark patterns”.
4.2 The affordances of UI elements
- Thus, we need to recognize that each UI element portrays value-laden form of interaction with the world.
- In other words, UI elements have affordances: they invite us to act in a certain way and not in another.
- See, for example, the very idea of a button:
“Buttons force decisions into binary choices. There is no way of answering that one partially agrees, has not realized the consequences of accepting, or does not care, even though these would probably be franker answers from most users. Buttons are verbs that rule out tenses other than present tense, and rule out modal auxiliary, subjunctive, and other more sophisticated ways in which our language expresses activity. Buttons also designate you as a masterful subject in full control of the situation, which obviously is problematic in many cases, such as the one above, where one cannot oversee, predict, or even understand the consequences of clicking “I accept,” or in other examples where the buttons effectively hide the scripts enacted by pressing it, such as in the “buy” example.” […] Powerful buttons have an unmistakably “trigger happy” feel to them. They make the world feel controllable, accessible, and conquerable, providing ‘Information at your fingertips’ as the slogan goes, or, more broadly, the reduction of society, culture, knowledge, its complexity, countless mediations, and transformations to a “double- click” information society, where everything becomes packaged in manageable and functional scripts activated by buttons offering easy rewards. From this perspective, the interface button becomes an emblem of our strong desire to handle the increasingly complex issues of our societies by efficient technical means—what one may call the “buttonization” of culture, in which our reality becomes clickable.” - Buttons, in “Software studies, a lexicon”, by Matthew Fuller
- What are the affordances of all the UI elements we have been seeing so far? What they invite us to perceive and act in certain ways?
| Element | What they invite us to perceive/act | What they disinvite us to perceive/act |
|---|---|---|
| Buttons | Immediacy, binary choice, accessibility, abstraction | Non-binary choice, conditionality, complexity, uncertainty |
| Checkboxes | ||
| Radio buttons | ||
| Toggles | ||
| Text boxes | ||
| Dropdowns | ||
| Sliders | ||
| Drag and drop | ||
| Pickers | ||
| List boxes | ||
| Notifications | ||
| Pop-ups | ||
| Progress bars | ||
| Tooltips | ||
| Menus | ||
| Tabs | ||
| Icons | ||
| Breadcrumbs | ||
| Accordions | ||
| Carousels |
4.3 Interaction design and Christian imagination
What, then, should be the objectives of interaction design? How can they fit in a view of the good life according to our Christian convictions?
- Should we really always design interactions?
- Respecting people’s attentional resources = respecting people as God’s image;
- Promoting Christian virtue and not vice;
- Which should mean an interaction that notices that God is at work — not just ourselves.
- Promoting more engagement with people and all of God’s creation.